<template>
  <div class="main-container">
    <!-- 顶部功能区 -->
    <div id="top" class="top-container">

      <!-- 图表容器 -->
      <div class="chart-container" v-show="advanceCharts">
        <!-- 入伍人数区块 -->
        <div class="audit-count-card" @mouseover="showTooltip" @mouseleave="hideTooltip">
          <div class="count-header">
            <img src="../../assets/icons/army.svg" alt="icon" style="width: 24px; height: 24px; margin-right: 8px;" />
            <span class="count-title">入伍成员总人数</span>
          </div>
          <div class="count-content">
            <span class="highlight-number">{{ totalCount }}</span>
            <span class="unit">人</span>
          </div>
          <div class="tooltip" v-if="tooltipVisible">
            入伍人数: {{ totalCount }}
          </div>
        </div>

      </div>

      <div class="search-container">
        <!-- 姓名、学号、学院 -->
        <label for="qName" class="left-align">姓名：</label>
        <input id="qName" type="text" v-model="qName" placeholder="请输入姓名" class="input-field">

        <label for="qStudentId" class="left-align">学号：</label>
        <input id="qStudentId" type="text" v-model="qStudentId" placeholder="请输入学号" class="input-field">

        <label for="qCollege" class="left-align">学院：</label>
        <input id="qCollege" type="text" v-model="qCollege" placeholder="请输入学院" class="input-field">

        <!-- 性别下拉选择框 -->
        <label for="qGender" class="left-align">性别：</label>
        <select id="qGender" v-model="qGender" class="input-field">
          <option value="">请选择</option>
          <option value="1">男</option>
          <option value="2">女</option>
        </select>

        <!-- 搜索按钮 -->
        <el-button type="primary" :loading='isSearchLoding' @click="conditionPageQuery(currentPage, pageSize)"
          class="search-btn">
          <el-icon>
            <Search />
          </el-icon>搜索
        </el-button>
        <!-- 清空按钮 -->
        <el-button style="width: 70px;border-radius: 15px;" type="danger" @click="onClear">
          <img src="../../assets/icons/clear.svg" alt="icon" style="width: 18px; height: 18px;" />
          清空
        </el-button>
        <!-- 导入数据按钮 -->
        <el-button style="width: 130px;" type="success" round @click="dialogVisible = true">
          <img src="../../assets/icons/Excel-import.svg" alt="icon"
            style="width: 18px; height: 18px; margin-right: 6px;" />
          从Excel中导入
        </el-button>
      </div>

      <!-- 详细筛选 -->
      <div v-if="advancedSearch" class="advanced-search">
        <div class="search-container">
          <!-- 民族 -->
          <label for="qNationality" class="left-align">民族：</label>
          <input id="qNationality" type="text" v-model="qNationality" placeholder="请输入民族" class="input-field">

          <!-- 专业 -->
          <label for="qMajor" class="left-align">专业：</label>
          <input id="qMajor" type="text" v-model="qMajor" placeholder="请输入专业" class="input-field">

          <!-- 年级 -->
          <label for="qGrade" class="left-align">年级：</label>
          <input id="qGrade" type="text" v-model="qGrade" placeholder="请输入年级" class="input-field">

          <!-- 政治面貌 -->
          <label for="qPoliticalAffiliation" class="left-align">政治面貌：</label>
          <select id="qPoliticalAffiliation" v-model="qPoliticalAffiliation" class="input-field">
            <option value="">请选择</option>
            <option value="群众">群众</option>
            <option value="共青团员">共青团员</option>
            <option value="中共党员">中共党员</option>
            <option value="中共预备党员">中共预备党员</option>
          </select>

          <div><label for="qMInEnlistmentDate" style="margin-left: -20px; margin-right: 10px;">入伍日期区间:</label>
            <el-date-picker v-model="qMInEnlistmentDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" /> --
            <el-date-picker v-model="qMaxEnlistmentDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
          </div>

          <!--是否退役下拉选择框 -->
          <label for="qIsVeteran" class="left-align">只查看：</label>
          <select id="qIsVeteran" v-model="qIsVeteran" class="input-field">
            <option value="">请选择</option>
            <option value="1">现役</option>
            <option value="0">退役</option>
          </select>

        </div>
      </div>
    </div>

    <!-- 详细筛选按钮 -->
    <div class="advanced-btn-container">
      <button @click="toggleAdvancedSearch" class="secondary-btn">
        {{ advancedSearch ? '收起筛选' : '展开筛选' }}
      </button>
      <button @click="toggleAdvancedCharts" class="secondary-btn">
        {{ advanceCharts ? '收起图表' : '展开图表' }}
      </button>
    </div>

    <!-- 表格列选择下拉框 -->
    <div class="column-selector">
      <div class="selectorTitle">呈现列：</div>
      <el-select v-model="selectedColumns" multiple placeholder="请选择要显示的列" @change="handleColumnChange">
        <el-option v-for="column in columnOptions" :key="column.value" :label="column.label" :value="column.value" />
      </el-select>

      <!-- 导出勾选按钮 -->
      <div class="export-btn-container">
        <el-dropdown @command="handleExportSelectCommand">
          <el-button type="primary" style="width:70px">
            <img src="../../assets/icons/whiteExport.svg" alt="icon"
              style="width: 18px; height: 18px; margin-right: 8px;" />
            导出
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="exportSelecteList">
                <img src="../../assets/icons/blackList.svg" alt="icon"
                  style="width: 18px; height: 18px; margin-right: 8px;" />
                导出为列表
              </el-dropdown-item>
              <el-dropdown-item command="exportSelectExcel">
                <img src="../../assets/icons/blackExcel.svg" alt="icon"
                  style="width: 18px; height: 18px; margin-right: 8px;" />
                导出为Excel
              </el-dropdown-item>
              <el-dropdown-item command="exportSelectPDF">
                <img src="../../assets/icons/blackPdf.svg" alt="icon"
                  style="width: 18px; height: 18px; margin-right: 8px;" />
                导出为PDF
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <!-- 添加入伍成员按钮 -->
      <div class="export-btn-container">
        <el-dropdown @command="addJoinArmyMember">
          <el-button type="primary" style="width:120px">
            <img src="../../assets/icons/whiteAdd.svg" alt="icon"
              style="width: 18px; height: 18px; margin-right: 8px;" />
            添加入伍成员
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="addFromNew">
                <img src="../../assets/icons/newMember.svg" alt="icon"
                  style="width: 18px; height: 18px; margin-right: 8px;" />
                新建成员信息
              </el-dropdown-item>
              <el-dropdown-item command="addFromPreReserve">
                <img src="../../assets//icons/blackPeopleManage.svg" alt="icon"
                  style="width: 18px; height: 18px; margin-right: 8px;" />
                从预储添加</el-dropdown-item>
              <el-dropdown-item command="addFromPreParatory">
                <img src="../../assets//icons/blackClass.svg" alt="icon"
                  style="width: 18px; height: 18px; margin-right: 8px;" />
                从社团添加
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 表格展示区 -->
    <el-table :data="tableData" row-key="id" max-height="670" style="width: 100%;text-align: center;"
      @selection-change="handleSelectionChange" :header-cell-style="{ background: '#eef1f6', color: '#2c2c3b' }"
      :scroll-x="true">
      <el-table-column type="selection" min-width="30"></el-table-column>
      <el-table-column label="序号" align="center" fixed min-width="60">
        <template #default="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="studentId" label="学号" align="center" v-if="selectedColumns.includes('studentId')"
        min-width="180" />
      <el-table-column prop="idCard" label="身份证号" align="center" v-if="selectedColumns.includes('idCard')"
        min-width="210" />
      <el-table-column prop="name" label="姓名" fixed align="center" v-if="selectedColumns.includes('name')"
        min-width="80" />
      <el-table-column label="性别" align="center" v-if="selectedColumns.includes('gender')" min-width="60">
        <template #default="scope">
          {{ scope.row.gender === "1" ? '男' : scope.row.gender === "2" ? '女' : '未知' }}
        </template>
      </el-table-column>
      <el-table-column prop="birthDate" label="出生日期" sortable align="center"
        v-if="selectedColumns.includes('birthDate')" min-width="120" />
      <el-table-column prop="enlistmentDate" label="入伍日期" sortable align="center"
        v-if="selectedColumns.includes('enlistmentDate')" min-width="120" />
      <el-table-column prop="dischargeDate" label="退伍日期" sortable align="center"
        v-if="selectedColumns.includes('dischargeDate')" min-width="120" />
      <el-table-column prop="college" label="学院" align="center" v-if="selectedColumns.includes('college')"
        min-width="200" />
      <el-table-column prop="telephone" label="电话" align="center" v-if="selectedColumns.includes('telephone')"
        min-width="230" />
      <el-table-column prop="politicalAffiliation" label="政治面貌" align="center"
        v-if="selectedColumns.includes('politicalAffiliation')" :min-width="120" />
      <el-table-column prop="nationality" label="民族" align="center" v-if="selectedColumns.includes('nationality')"
        min-width="60" />
      <el-table-column prop="educationBackground" label="学历" align="center"
        v-if="selectedColumns.includes('educationBackground')" min-width="60" />
      <el-table-column prop="major" label="专业" align="center" v-if="selectedColumns.includes('major')"
        min-width="160" />
      <el-table-column prop="militaryBranch" label="军种" align="center" v-if="selectedColumns.includes('militaryBranch')"
        min-width="160" />
      <el-table-column prop="nativePlace" label="籍贯" align="center" v-if="selectedColumns.includes('nativePlace')"
        min-width="150" />
      <el-table-column label="操作" align="center" fixed="right" min-width="130">
        <template #default="scope">
          <router-link :to="{ path: '/admin/JoinArmy/joinArmyMemberInfo', query: { id: scope.row.id } }"
            class="detail-btn">查看详细信息</router-link>
        </template>
      </el-table-column>
    </el-table>


    <!-- 底部分页导航栏 -->
    <div class="page-nav">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" hide-on-single-page="true"
        layout="total, prev, pager, next, sizes" background :page-sizes="[5, 10, 20, 50]" :size="size" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <!-- 新建成员表单对话框 -->
    <el-dialog v-model="dialogVisibleFrom" style="top: -100px;" width="60%" center>
      <NewMemberForm @submit="handleFormSubmit" @cancel="handleFormCancel" />
    </el-dialog>

    <!-- 从已有导入成员对话框 -->
    <el-dialog v-model="dialogVisibleList" width="75%" center>
      <MemberList v-model="dialogVisibleList" :sourceType="sourceType" />
    </el-dialog>
  </div>


  <!-- 导入Excel弹出框 -->
  <div>
    <el-dialog v-model="dialogVisible" title="上传Excel文件" width="500" :before-close="handleClose">
      <div>
        <el-upload ref="uploadRef" class="upload-demo" action="/api/admin/joinArmy/import-excel/army" :limit="1"
          :file-list="fileList" :on-exceed="handleExceed" :auto-upload="false" :on-success="handleSuccess"
          :on-error="handleError" :on-change="handleChange">
          <template #trigger>
            <el-button type="primary" class="ml-3">选择文件</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip">
              每次最多只能上传一个文件，后上传的文件将覆盖先上传的文件
            </div>
          </template>
        </el-upload>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false" style="width: 60px;">取消</el-button>
          <el-button type="primary" @click="importFromExcel()" style="width: 60px;" :loading="isLoading"
            :disabled="fileList.length === 0">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { RouterLink } from 'vue-router';
import { ElMessage, UploadProps, UploadUserFile, ElMessageBox } from 'element-plus';
import axios from 'axios';
import { getArmyCount, getPage, exportList, exportPdf, exportExcel } from '@/api/join-army/join-army';

//新建成员表单
import NewMemberForm from './NewForm.vue';
import MemberList from './MemberList.vue';

// 分页相关数据
const size = ref('default');
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);
const dialogVisible = ref(false)

//Loding数据
const isSearchLoding = ref(true);

const totalCount = ref(0);


// 导入Excel中的数据相关接口
const isLoading = ref(false)
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('你确定要关闭吗?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const handleExceed = () => {
  ElMessage.warning('每次只能上传一个文件');
};

// 手动提交上传
const submitUpload = async () => {
  if (!uploadRef.value) return;

  isLoading.value = true;
  try {
    // 获取文件对象
    const file = fileList.value[0];
    const formData = new FormData();
    formData.append('file', file.raw); // 注意：Element Plus 的文件对象结构是 { raw: File }

    // 手动发送请求
    const response = await axios.post('/api/admin/joinArmy/import-excel/army', formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
    });

    // 处理响应
    if (response.data.code === 200) {
      ElMessage.success('上传成功');
      dialogVisible.value = false;
      // 通知父组件刷新数据等操作
    } else {
      ElMessage.error(`上传失败: ${response.data.message}`);
    }
  } catch (error) {
    ElMessage.error('网络错误或服务器异常');
    console.error('上传失败:', error);
  } finally {
    isLoading.value = false;
  }
};


const fileList = ref<UploadUserFile[]>([])
const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile)
  fileList.value.push(uploadFile)
}


//获取入伍总数
function getTotalCount() {
  getArmyCount().then(response => {
    totalCount.value = response.data;
  }).catch(error => {
    ElMessage.error('入伍人数获取失败！');
    console.log(error);
  })
}

//鼠标悬浮显示入伍人数
const tooltipVisible = ref<boolean>(false);
// 方框展示区的交互
const showTooltip = () => {
  tooltipVisible.value = true;
};
const hideTooltip = () => {
  tooltipVisible.value = false;
}

// 表格展示数据
let tableData = ref([]);

// 查询参数定义
const qName = ref("");
const qStudentId = ref("");
const qCollege = ref("");
const qGender = ref("");
const qIsVeteran = ref("");
const qPoliticalAffiliation = ref("");
const qNationality = ref("");
const qGrade = ref("");
const qMajor = ref("");
const qMInEnlistmentDate = ref("");
const qMaxEnlistmentDate = ref("");

// 选中的成员信息
const selectedMembers = ref([]);

// 显示详细筛选项
const advancedSearch = ref(false);
//图表
const advanceCharts = ref(true);


// 表格列选择相关
const columnOptions = ref([
  { label: '学号', value: 'studentId' },
  { label: '身份证号', value: 'idCard' },
  { label: '姓名', value: 'name' },
  { label: '性别', value: 'gender' },
  { label: '入伍日期', value: 'enlistmentDate' },
  { label: '退伍日期', value: 'dischargeDate' },
  { label: '出生日期', value: 'birthDate' },
  { label: '学院', value: 'college' },
  { label: '政治面貌', value: 'politicalAffiliation' },
  { label: '民族', value: 'nationality' },
  { label: '学历', value: 'educationBackground' },
  { label: '专业', value: 'major' },
  { label: '军种', value: 'militaryBranch' },
  { label: '电话', value: 'telephone' },
  { label: '籍贯', value: 'nativePlace' },
]);

const selectedColumns = ref(['name', 'studentId', 'gender', 'militaryBranch', 'enlistmentDate', 'telephone']);


//清空查询参数
function onClear() {
  qName.value = '',
    qStudentId.value = '',
    qCollege.value = '',
    qGender.value = '',
    qIsVeteran.value = '',
    qPoliticalAffiliation.value = '',
    qNationality.value = '',
    qGrade.value = '',
    qMajor.value = '',
    qMInEnlistmentDate.value = '',
    qMaxEnlistmentDate.value = ''
}



// 多选框 选择项发生变化时触发
function handleSelectionChange(selection) {
  selectedMembers.value = selection.map(item => item.studentId);
}

// 条件分页查询获取所有的成员
const conditionPageQuery = async (page, pageSize) => {
  try {
    isSearchLoding.value = true;
    const data = {
      page,
      pageSize,
      name: qName.value,
      studentId: qStudentId.value,
      college: qCollege.value,
      gender: qGender.value,
      isVeteran:qIsVeteran.value,
      politicalAffiliation: qPoliticalAffiliation.value,
      nationality: qNationality.value,
      grade: qGrade.value,
      major: qMajor.value,
      minEnlistmentDate: qMInEnlistmentDate.value,
      maxEnlistmentDate: qMaxEnlistmentDate.value
    };
    const result = await getPage(data)
    tableData.value = result.data.records;
    total.value = result.data.total;
    isSearchLoding.value = false;

  } catch (err) {
    console.log('查询数失败', err)
  } finally {
    isSearchLoding.value = false
  }
}

// 切换详细筛选显示
function toggleAdvancedSearch() {
  advancedSearch.value = !advancedSearch.value;
  if (!advancedSearch.value) {
    // 清空输入框内容
    qPoliticalAffiliation.value = "";
    qNationality.value = "";
    qGrade.value = "";
    qMajor.value = "";
  }
}

//切换图表显示
function toggleAdvancedCharts() {
  advanceCharts.value = !advanceCharts.value;
}

// 每页显示条目个数变化
const handleSizeChange = (val) => {
  conditionPageQuery(currentPage.value, val);
};

// 当前页码变化
const handleCurrentChange = (val) => {
  conditionPageQuery(val, pageSize.value);
};

// 处理列选择变化
function handleColumnChange() {
  // 这里可以根据需要添加逻辑
}

//添加成员
function addJoinArmyMember(command) {
  if (command === 'addFromNew') {
    addFromNew();
  } else if (command === 'addFromPreReserve') {
    addFromPreReserve();
  } else if (command === 'addFromPreParatory') {
    addFromPreParatory();
  }
}

// 控制对话框显示与隐藏
const dialogVisibleFrom = ref(false);
const dialogVisibleList = ref(false);

// 通过新建添加入伍成员
function addFromNew() {
  dialogVisibleFrom.value = true; // 显示对话框
}

// 处理表单提交
function handleFormSubmit() {
  dialogVisibleFrom.value = false; // 隐藏对话框
  // 这里可以添加提交后的逻辑，例如刷新表格数据
}
// 处理表单取消
function handleFormCancel() {
  dialogVisibleFrom.value = false; // 隐藏对话框
}

// 定义 sourceType，用于传递给 MemberList 组件
const sourceType = ref('');

//通过预征班添加入伍成员
function addFromPreParatory() {
  sourceType.value = 'preParatory'; // 设置 sourceType 为 'preParatory'
  dialogVisibleList.value = true;
}

//通过预储添加入伍成员
function addFromPreReserve() {
  sourceType.value = 'preReserve'; // 设置 sourceType 为 'preReserve'
  dialogVisibleList.value = true;
}


// 处理导出命令
//导出勾选
function handleExportSelectCommand(command) {
  if (command === 'exportSelecteList') {
    exportSelecteList();
  } else if (command === 'exportSelectExcel') {
    exportSelectExcel();
  } else if (command === 'exportSelectPDF') {
    exportSelectPDF();
  }
}
// 导出勾选
//导出为列表
function exportSelecteList() {
  if (selectedMembers.value.length === 0) {
    ElMessage.warning('请先选择要导出的成员');
    return;
  }
  // ElMessage.success("正在导出,请稍等！");
  const data = {
    heads: selectedColumns.value,
    studentIds: selectedMembers.value
  };
  ElMessage('开发中！');
  //exportList(data);
}
//导出每个学生Excel简历
function exportSelectExcel() {
  if (selectedMembers.value.length === 0) {
    ElMessage.warning('请先选择要导出的成员');
    return;
  }
  // ElMessage.success("正在导出,请稍等！");
  const data = {
    studentIds: selectedMembers.value
  };
  ElMessage('开发中！');
  // exportExcel(data);
}
//导出每个学生简历的PDF
function exportSelectPDF() {
  if (selectedMembers.value.length === 0) {
    ElMessage.warning('请先选择要导出的成员');
    return;
  }
  const data = {
    studentIds: selectedMembers.value
  };
  // ElMessage.success("正在导出,请稍等！");
  ElMessage('开发中！');
  // exportPdf(data);
}

// 组件实例挂载完成之后 调用函数获取相关数据
onMounted(() => {
  conditionPageQuery(currentPage.value, pageSize.value);
  getTotalCount();
});


const uploadRef = ref(null);
// 从Excel中导入数据
const importFromExcel = () => {
  isLoading.value = true;
  uploadRef.value.submit();
};

const handleSuccess = () => {
  uploadRef.value.clearFiles();
  isLoading.value = false;
  dialogVisible.value = false;
  ElMessage.success('文件上传成功');
  // 这里可以添加上传成功后的回调逻辑
};

const handleError = (error) => {
  isLoading.value = false;
  ElMessage.error(`上传失败: ${error.message}`);
  // 这里可以添加错误处理逻辑
};

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.main-container {
  width: 100%;
  height: 100%;
  /* min-width: 1492px; */
}

/* 数据卡片样式 */
.audit-count-card {
  min-width: 20rem;
  padding: 1rem;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f1f3f5 100%);
  border-radius: 12px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  position: relative;
  /* 为了悬浮提示 */
}

.audit-count-card:hover {
  transform: translateY(-2px);
}

/* 鼠标悬浮时显示人数信息 */
.tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 4px;
  font-size: 12px;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 标题样式 */
.count-header {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 水平居中 */
  gap: 8px;
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dee2e6;
}

.count-title {
  font-size: 1.1em;
  color: #495057;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* 数字展示 */
.count-content {
  text-align: center;
  margin: 20px 0;
}

.highlight-number {
  font-size: 2.8em;
  font-weight: 700;
  color: #f03e3e;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  margin-right: 5px;
}

.unit {
  font-size: 1.2em;
  color: #868e96;
  vertical-align: super;
}




/* 自定义对话框样式 */

.page-title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 20px;
  color: #333;
}

#top {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #f4f5f6;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 列选择器 */
.column-selector {
  display: flex;
  width: 80%;
  margin: auto;
  align-items: center;
  margin-bottom: 5px;
}

.selectorTitle {
  width: 110px;
  color: #606266;
}

.search-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  min-width: 1430px;
}

.input-field {
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  width: 160px;
  /* 保证所有输入框宽度一致 */
}

.left-align {
  width: 80px;
  text-align: center;
}

.search-btn {
  width: 70px;
  padding: 8px 16px;
  font-size: 14px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 15px;
  cursor: pointer;
}

.search-btn:hover {
  background-color: #45a049;
}

.secondary-btn {
  margin-right: 10px;
  padding: 8px 16px;
  font-size: 14px;
  background-color: #e4e7ed;
  color: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.secondary-btn:hover {
  background-color: #d9e4f5;
}

.advanced-btn-container {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.advanced-search {
  margin-top: 20px;
}

.advanced-search .search-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.page-nav {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}



/* 操作按钮 */
.detail-btn {
  text-decoration: none;
  color: inherit;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: none;
  background-color: #409eff;
  color: white;
  padding: 6px 16px;
  text-align: center;
  display: inline-block;
  font-size: 12px;
  border-radius: 5px;
}

.detail-btn:hover {
  background-color: #66b1ff;
}

.export-btn-container {
  display: flex;
  justify-content: flex-end;
  margin-left: 20px;
}


.selectorTitle {
  width: 110px;
  color: #606266;
}

.el-upload__tip {
  color: red;
}

.ml-3 {
  width: 80px;
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>
